import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {Myinput,Button} from './componts/my-input.js'
import {MyClassInput} from './componts/my-class-input.js'
const root =document.getElementById('root')

console.log(root,'root')

//条件渲染
//let isLoading=true;
//if-else
// const loadData=()=>{
// 	if(isLoading){
// 		return (<div>loading...</div>)
// 	}
// 	return <div>数据加载完成</div>
// }
//三元表达式
// const loadData=()=>{
// 	return isLoading?(<div>loading...</div>):(<div>数据加载完成</div>)
// }
//逻辑与运算符
// const loadData=()=>{
// 	return isLoading&&(<div>loading...</div>)
// }

// const name='jack'
// const title = (< h1 > {loadData()} < /h1>)

//列表渲染
const personList=[
	{id:1,name:'张三'},
	{id:2,name:'里斯'},
	{id:3,name:'王五'},
]

// const list=(
// 	<ul>
// 		{personList.map((item,index)=>{
// 			return <li className="li" style={{color:'red', backgroundColor: "skyblue" }} key={item.id}>{index}-{item.name}</li>
// 		})}
// 	</ul>
// )

// ReactDOM.render(list,root)
const userInput=Myinput('请输入用户名')
const passwordInput=Myinput('请输入密码','password')
ReactDOM.render([userInput,  <Button />,passwordInput,<MyClassInput list={personList} key={'sdf'}/>],root)
